﻿{extend name="layout:base" /}

{block name="main_content"}
<style>
   .certinfobg span {
          position: absolute;
          text-align: center;
          font-family: Microsoft YaHei;
          width: 300px;
          font-size: 6.3rem;
          color: #F79C55;
        }

      .name-info {
        left: 455px;
        top: 660px;
        color: #FFFFFF !important;
      }

      .city-info {
        left: 455px;
        top: 755px;
        color: #FFFFFF !important;
        font-size: 3.2rem !important;
      }

      .time-info {
        left: 450px;
        top: 813px;
        font-size: 2.8rem !important;
      }

      .rank-info {
        left: 450px;
        top: 875px;
        font-size: 2.8rem !important;
      }
</style>
  <div class="page-content">
    <?php if(!empty($current_page)): ?>
      <div class="page-header">
        <h1>
          您当前操作
          <small>
            <i class="ace-icon fa fa-angle-double-right"></i>
            {$current_page.title|default=''}
          </small>
        </h1>
      </div>
    <?php endif; ?>
    </div>
    <div class="pic-box" style="border: 1px solid red;height:1000px;width:750px;margin:auto;background-image: url('/static/admin/images/beijing_image.jpg');;">
     <img style="position: absolute;" id="crop_path" src="/static/admin/images/cert_background.jpg" style="width: 750px;">
     <img style="position: absolute;z-index:1;" id="slogan" item-val="font1.png" src="/static/admin/images/font1.png">
     <img style="position: absolute;" id="logo" src="/static/admin/images/certlogo.png">
     <div style="position: absolute;" class="certinfobg">
        <img src="/static/admin/images/certinfobg.png">
        <span class="name-info">人名</span>
        <span class="city-info">里程</span>
        <span class="time-info">用时</span>
        <span class="rank-info">排名</span>
      </div>
    </div>

<div class="share-button" onclick="syntheticImages()" style="max-width: 750px; margin: auto;background-color:#FF7E18;border-color:#FF7E18;padding:15px 20px;width:95%; text-align:center;">
      合成图片
    </div>
    
    <script>
    function syntheticImages() {
      $slogan = $("#slogan").attr("item-val");
      $.ajax({
        url: "{:url('composite/synthetic')}",
        type: "POST",
        dataType: "JSON",
        data: { slogan: $slogan },
        success: function (data) {
          if (data.res) {
            //location.href = "";
          } else {
            alert(data.msg);
          }
        }, error: function () {
          alert("系统繁忙，请稍后再试");
        }
      });
    }
    </script>
{/block}